
<template>
  <view class="content flex flex-column ft28">
    <!-- 搜索框 -->
<view class="search-box" @click="toEquipment">
      <view class="inp radius-16">
        <input class="inpFont radius-16" type="text" placeholder="搜索附近充电桩..." disabled="‘disabled’" />
      </view>
      <view class="search-icon">
        <image src="../../static/sousuo.png" class="search-icon-img" />
      </view>
    </view>
    <!-- 地图 -->    
    <view class="mapSize">
      <!-- <map
        style="width: 100%; height:100%;"
        :latitude="latitude"
        :longitude="longitude"
        :markers="marker"
        :scale="scale"
        :controls="controls"
        show-location="false"
        id="map1"
        ref="map1"
        @markertap="goToEquipment"
      ></map>-->
      <map
        class="map mapSize"
        id="map"
        :longitude="location.longitude"
        :latitude="location.latitude"
        scale="14"
        show-location="false"
        :markers="markers"
        @markertap="selEquipment"
      ></map>
    </view>

    <!-- 覆盖控件层 -->
    <cover-view class="map-cover">
      <!-- 输入设备号 -->
      <!-- <cover-view class=".drive-code" @click="toInputInfo">
        <cover-image src="../../static/input.png" class="img"></cover-image>
      </cover-view>-->
      <!-- 定位 -->
      <cover-view class="location map-cover-icon" @click="getPosition">
        <cover-image src="../../static/dingwei.png" class="img"></cover-image>
      </cover-view>
      <!-- 扫码 -->
      <cover-view class="nearInfo"  v-if="markers.length!=0">
        <cover-view
        class="box mg16-x mgt16 bgw pd30 radius-16"
        @tap="toNavigation(item.latitude,item.longitude)">
        <cover-view class="flex pd2-y">
          <cover-view class="ft30 mgr20">设备编号:</cover-view>
          <cover-view class="ft28 dlc-gray">{{nearbyEquipment.equipmentNumber}}</cover-view>
        </cover-view>
        <cover-view class="flex pd2-y">
          <cover-view class="ft30 mgr20">设备地址:</cover-view>
          <cover-view class="ft28 dlc-gray">{{ 
            (nearbyEquipment.province+nearbyEquipment.area+nearbyEquipment.city+nearbyEquipment.equipmentAddress) }}</cover-view>
        </cover-view>

        <cover-view class="flex pd2-y">
          <cover-view class="ft30 mgr20">距离:</cover-view>
          <cover-view class="ft28 dlc-gray">{{(nearbyEquipment.distance/1000)}}千米</cover-view>
        </cover-view>
      
       <!-- <cover-view>
         距离最近设备地址:{{nearbyEquipment.province+
         nearbyEquipment.area+nearbyEquipment.city+nearbyEquipment.equipmentAddress}}
         
       </cover-view>
        <cover-view>
         设备编号:{{nearbyEquipment.equipmentNumber}}
         
       </cover-view>
        <cover-view>
         与定位点距离:{{(nearbyEquipment.distance/1000)}}
         千米
       </cover-view> -->

      </cover-view>
       
      </cover-view>
      <!-- go -->
      <cover-view class="goImg"  v-if="markers.length!=0">
          <cover-image src="./../../static/point.png" class="goImg" @click="goToEquipment"></cover-image>
      </cover-view>
      <!-- 个人 -->
      <!-- <cover-view class="person map-cover-icon" @click="toPerson">
        <cover-image src="../../static/person_cur.png" class="img"></cover-image>
      </cover-view> -->
    </cover-view>
    <i-message id="message" />
  </view>
</template>
<script>
// 权限，x,x，扫码
import {
  authorization,
  systemParam,
  managerScan,
  userScan,
  getAroundList,
} from "@/api";
import store from "@/store";
// 截取url参数
import { urlParse } from "@/utils";
import { REQUEST_BASE_URL } from "@/config";
const { $Message } = require("@/wxcomponents/iview/base/index");
const amapFile = require("@/libs/amap-wx.js");
export default {
  data() {
    return {
      list: [],
      longitude: "",
      latitude: "",
      scale: "16",
      equipmentNumber: "",
      markers: [
        // {
        //   id: 0,
        //   latitude: 20.013305, //纬度
        //   longitude: 118.685713, //经度
        //   iconPath: "", //显示的图标
        //   rotate: 0, // 旋转度数
        //   width: 10, //宽
        //   height: 10, //高
        //   title: "充电桩位置", //标注点名
        //   alpha: 0.5, //透明度
        //   // 　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
        //   //       　 content:'',//文本
        //   //        　color:'red',//文本颜色
        //   //        　fontSize:24,//文字大小
        //   //          x:5,//label的坐标，原点是 marker 对应的经纬度
        //   //          y:1,//label的坐标，原点是 marker 对应的经纬度
        //   //          borderWidth:12,//边框宽度
        //   //          borderColor:'pink',//边框颜色
        //   //       　　borderRadius:20,//边框圆角
        //   //       　　bgColor:'black',//背景色
        //   //      　   padding:5,//文本边缘留白
        //   //           textAlign:'right'//文本对齐方式。
        //   //   },
          //  callout:{//自定义标记点上方的气泡窗口 点击有效
          //  　　content:'',//文本
          //  　　color:'#ffffff',//文字颜色
          //  　　fontSize:14,//文本大小
          //  　　borderRadius:2,//边框圆角
          // 　　 bgColor:'#00c16f',//背景颜色
          //  　　display:'ALWAYS',//常显
          //  },
        //   // anchor:{//经纬度在标注图标的锚点，默认底边中点
        //   //     x:0,    原点为给出的经纬度
        //   //     y:0,
        //   // }
        // },
      ],
      nearbyEquipment:{
        province: "",
        area: "",
        city: "",
        equipmentAddress: "",
        distance: "", 
        equipmentId: "",
        equipmentNumber: "",
        equipmentStatus:"",
        isFlag: "",
        latitude: "",
        longitude: "",
        address:""
      },
      dviLocation: false,
      //高德
      key: "44f6c9ea53cc0ad22c06a0a23dc5892e",
      textData: {},
      location: {
        latitude: "23.595804",
        longitude: "113.532969",
      },
    };
  },
  methods: {
    // 获取当前定位
    async getPosition() {
    const myAmapFun = new amapFile.AMapWX({
      key: "281bac52a6832b0c0a48d9655563a3bf",
      });
      myAmapFun.getRegeo({
      iconPath: "./../../static/cdz.png",
      iconPathSelected: "./../../static/cdz.png",
      width: "50rpx",
      height: "50rpx",

      success:(data)=>{
        this.location.longitude=data[0].longitude;
        this.location.latitude=data[0].latitude;
         this.getList();
      },
      fail:(info) =>{
        //失败回调
        console.log(info);
      },
    });

      // uni.getLocation({
      //   type: "wgs84",
      //   success: (res) => {
      //     this.longitude = res.longitude;
      //     this.latitude = res.latitude;
      //     try {
      //       uni.equipmentNumber("location", {
      //         longitude: this.longitude,
      //         latitude: this.latitude,
      //       });
      //     } catch (e) {
      //       // error
      //     }

      //   },
      // });

      // 重定位
      // var againLocation = uni.createMapContext("map1", this);
      // againLocation.moveToLocation();
    },
    // 获取充电桩位置
    async getList() {
      //调用服务器接口
      const { data } = await getAroundList({
        longitude: this.location.longitude,
        latitude: this.location.latitude,
      });

      if (data.code == 1) {
        this.nearbyEquipment=data.data[0]
        this.marker = [];
        for (let i = 0; i < data.data.length; i++) {
          this.markers.push({
            id: {
              province: data.data[i].province,
              city:data.data[i].city,
              area:data.data[i].area,
              area:data.data[i].area,
              equipmentAddress:data.data[i].equipmentAddress,
              equipmentNumber:data.data[i].equipmentNumber,
              latitude: data.data[i].latitude,
              longitude: data.data[i].longitude,
              distance:data.data[i].distance
            },
            latitude: data.data[i].latitude,
            longitude: data.data[i].longitude,
            iconPath:i==1?"./../../static/cdzsel.png":"./../../static/cdz.png",
            width: 30,
            height: 30,
            alpha: 0.8, //透明度,
          //   callout:{
          //  　　content:"设备编号:"+data.data[i].   equipmentNumber,//文本
          //  　　color:'#4c82f0',//文字颜色
          //  　　fontSize:14,//文本大小
          //  　　borderRadius:2,//边框圆角
          // 　　 bgColor:'#ffffff',//背景颜色
          //  　　display:'BYCLICK',//常显
          //      padding:3
          //  },
          });
        }
      }
    },

    //图标点击
    selEquipment(e) {
      for(let j =0;j<this.markers.length;j++){
         this.markers[j].iconPath="./../../static/cdz.png"
       if(this.markers[j].id.equipmentNumber==e.markerId.equipmentNumber){
          this.markers[j].iconPath="./../../static/cdzsel.png"

       }
      }

      this.nearbyEquipment.province=e.markerId.province
      this.nearbyEquipment.city=e.markerId.city
      this.nearbyEquipment.area=e.markerId.area
      this.nearbyEquipment.equipmentAddress=e.markerId.equipmentAddress
      this.nearbyEquipment.equipmentNumber=e.markerId.equipmentNumber
      this.nearbyEquipment.latitude=e.markerId.latitude
      this.nearbyEquipment.longitude=e.markerId.longitude
      this.nearbyEquipment.distance=e.markerId.distance

    },
    goToEquipment(){
     uni.openLocation({
        latitude: Number( this.nearbyEquipment.latitude),
        longitude: Number( this.nearbyEquipment.longitude),
        success: function (e) {},
        fail: function (e) { },
      });
    },

    // 跳转个人
    toPerson() {
      this.auth();

      uni.navigateTo({
        url: `/pages/personal/index`,
      });
    },
    // 跳转新建订单
    toInputInfo() {
      this.auth();
      if (this.dviLocation) {
        uni.navigateTo({
          url: `/pagesA/order/inputCode`,
        });
      }
    },
    // 检测权限
    async auth(option) {
      let [a, { code, errMsg }] = await uni.login();
      if (errMsg === "login:ok") {
        //调用服务器接口
        const { data } = await authorization({ code });
        if (data.code === 1) {
          this.dviLocation = true;
          const { Authorization, openId } = data.data;
          if (Authorization) {
            //刷新token,和第一次进来getUserInfo
            store.commit("set_token", Authorization);
            await store.dispatch("getUserInfo");
            if (option.q != undefined) {
              //微信扫二维码进入
              let link = decodeURIComponent(option.q);
              uni.navigateTo({
                url: `/pagesA/order/inputCode?equipmentNumber=${
                  link.match(/equipmentNumber=(\S*)&/)[1]
                }&mouthNo=${link.match(/mouthNo=(\S*)/)[1]}`,
              });
            } else if (option.equipmentNumber) {
              //小程序主页扫一扫进入
              this.equipmentNumber = option.equipmentNumber;
              this.getPosition();
              uni.navigateTo({
                url: `/pagesA/order/inputCode?equipmentNumber=
                ${option.equipmentNumber}&mouthNo=${
                  option.mouthNo == "" ? "" : option.mouthNo
                }`,
              });
            }
          } else {
            uni.redirectTo({
              url: `/pagesA/auth/index?openId=${openId}`,
            });
          }
        } else {
          return Promise.reject();
        }
      }
    },
    // 扫一扫设备码
    scanQrcode() {
      this.auth();
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ["qrCode"],
        success: ({ errMsg, result }) => {
          if (errMsg === "scanCode:ok") {
            // 页面传参，二维码传出
            if (
              result.indexOf(
                "https://www.golwayhhln.top/r/DTkQSD3ddRr92wf?equipmentNumber="
              ) == -1
            ) {
              $Message({
                content: "请扫描正确的二维码",
                type: "error",
                duration: 3,
              });
            } else if (result.indexOf("mouthNo") == -1) {
              uni.navigateTo({
                url: `/pagesA/order/inputCode?equipmentNumber=${
                  result.match(/equipmentNumber=(\S*)/)[1]
                }`,
              });
            } else {
              uni.navigateTo({
                url: `/pagesA/order/inputCode?equipmentNumber=${
                  result.match(/equipmentNumber=(\S*)&/)[1]
                }&mouthNo=${result.match(/mouthNo=(\S*)/)[1]}`,
              });
            }
          }
        },
      });
    },
    // 去玩设备列表
    toEquipment() {
      this.auth();
      uni.navigateTo({
        url: `/pagesA/equipment/getAroundList?latitude=${this.location.latitude}&longitude=${this.location.longitude}`,
      });
    },
  },
  //从取store用户信息
  computed: {
    userInfo() {
      return store.state.user.userInfo;
    },

  },
  onLoad(e) {
    var myAmapFun = new amapFile.AMapWX({
      key: "281bac52a6832b0c0a48d9655563a3bf",
    });

    myAmapFun.getRegeo({
      iconPath: "./../../static/cdz.png",
      iconPathSelected: "./../../static/cdz.png",
      width: "50rpx",
      height: "50rpx",
      success:(data)=>{
        this.location.longitude=data[0].longitude;
        this.location.latitude=data[0].latitude;
         this.getList();
      },
      fail:(info) =>{
        //失败回调
        console.log(info);
      },
    }),
      myAmapFun.getStaticmap({
         success:(data)=>{
        console.log(data);
      },
      fail:(info) =>{
        //失败回调
        console.log(info);
      },
      });
  },

  showMarkerInfo:(data, i)=> {
    console.log("showMarkerInfo");
    console.log(data, i);
    // var that = this;
    //   textData: {
    //     name: data[i].name,
    //     desc: data[i].address
    //   }
  },
  changeMarkerColor: function (data, i) {
    console.log("changeMarkerColor");
    console.log(data, i);
    // var that = this;
    // var markers = [];
    for (var j = 0; j < data.length; j++) {
      if (j == i) {
        data[j].iconPath = "选中 marker 图标的相对路径"; //如：..­/..­/img/marker_checked.png
      } else {
        data[j].iconPath = "未选中 marker 图标的相对路径"; //如：..­/..­/img/marker.png
      }
      markers.push(data[j]);

      markers: markers;
    }

    // 小程序扫码进入
    // a.网页二维码带端口;
    // b.网页二维码不带端口；
    // 微信扫码进入
    // a.网页二维码带端口;
    // b.网页二维码不带端口；
    // --微信直接扫为option.q
    // c:设备号，端口号
    // 获取当前位置
  
    try {
      const value = uni.getStorageSync("location");
      if (value) {
        this.longitude = value.longitude;
        this.latitude = value.latitude;
        this.getList();

      }
    } catch (e) {
      // error
    }
  },
  onShow() {
    // this.getPosition();
  },
  onHide() {
    this.isFocus = false;
    this.visible = false;
    this.equipmentNumber = "";
  },
};
</script>

<style lang='stylus' >
page {
  height: 100%;
}

.search-box {
  display: float;
  float: left;
  width: 750rpx;
  height: 8vh;
  background-color: #3e87f0;
}
.inp {
  float: left;
  width: 640rpx;
  height: 5vh;
  margin: 10rpx;
  margin-top:1.5vh
  margin-bottom:1.5vh
  padding: 5rpx 5rpx;
  background-color: #fff;
  text-align: center;
}
.inpFont {
  width:640rpx;
  height:5vh;
  font-size: 36rpx;
}
.search-icon {
  float: left;
  display: inline-block;
  margin-top:1vh
  width: 5vh;
  height: 5vh;
}

.search-icon-img {
  width: 50rpx;
  height: 50rpx;
  padding: 15rpx 10rpx;
}
.mapSize{
  width:100%
  height:90vh
}
.map-cover {
  width: 750rpx;
  height: 310rpx;
  position: fixed;
  bottom: 10rpx;
  display: inline-block;
  text-align: center;
}

.map-cover-icon {
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  bottom: 10rpx;
  background-color: #fff;
  border-radius: 50%;
}

.location {
  left: 20rpx;
  bottom  220rpx
}

.scan-qr {
  width: 300rpx;
  height: 300rpx;
  position: fixed;
  left: 50%;
  margin-left: -150rpx;
  bottom: 10rpx;
  border-radius: 50%;
}

.scan-qr-img {
  width: 300rpx;
  height: 300rpx;
}

.scan-qr-text {
  display: inline;
  text-align: center;
  color: #fff;
  font-size: 30rpx;
}

.person {
  right: 20rpx;
}

.img {
  width: 80rpx;
  height: 80rpx;
  margin: 10rpx;
}

.drive-code {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #fff;
  position: fixed;
  left: 20rpx;
  bottom: 150rpx;
  text-align: center;
}
.nearInfo{
  width: 750rpx;
  height: 200rpx;
  position: fixed;
  bottom: 0rpx;
  border-radius :30rpx
  background-color :#fff
  color #000
}
.goImg{
  z-index:999
  width 120rpx
  height 120rpx
  background-color #fff
  border-radius 50%
  position fixed
  bottom 140rpx 
  right 60rpx
}
</style>
